<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- =============== VENDOR STYLES ===============-->
    <link rel="stylesheet" href="__STATIC__/vendor/fontawesome/css/font-awesome.min.css">
    <!-- =============== PAGE VENDOR STYLES ===============-->
    <!-- =============== BOOTSTRAP STYLES ===============-->
    <link rel="stylesheet" href="__STATIC__/css/bootstrap.css" id="bscss">
    <!-- =============== APP STYLES ===============-->
    <!--<link rel="stylesheet" href="__STATIC__/css/app.css" id="maincss">-->
    <style>
        .list-group {
            line-height: 1.3;
        }
        .list-group .list-group-item {
            padding: 10px;
        }
        .mr-lg {
            margin-right: 15px !important;
        }
    </style>
</head>
<body>
<form method="POST" action="{:url('questionnaire/sort')}" id="form" accept-charset="UTF-8" class="layui-form">
    <input type="hidden" name="id" id="id" value="{$list.id}">
    <div class="layui-form-item">问卷名称:{$list.name}</div>

    <div class="layui-form-item">
        <div class="content-wrapper">
            <ul class="list-group sortable">
                {foreach $list->qids as $id}
                <li class="list-group-item" data-id="{$id}" >
                    <em class="fa fa-reorder fa-fw text-muted mr-lg"></em>{$question[$id]['name']}</li>
                {/foreach}
            </ul>
        </div>
    </div>

</form>

</body>
<script src="__STATIC__/js/jquery.js"></script>
<script src="/static/html.sortable/dist/html.sortable.js"></script>
<script src="__STATIC__/plugins/layui/layui.js"></script>

<script>

    (function(window, document, $, undefined) {
        $(function() {
            var layer='';
            layui.use(['layer'], function(){
                layer=layui.layer;
            });
            sortable('.sortable', {
                forcePlaceholderSize: true,
                placeholder: '<div class="box-placeholder p0 m0"><div></div></div>',
            });
        });
    })(window, document, window.jQuery);

</script>
</html>;